<template>
  <div id="home">
    <nav-bar class="home-nav"><div slot="center">购物街</div></nav-bar>
    <!-- 解决不能吸顶的BUG -->
    <tab-control class="tab-control" :titles="['流行', '新款', '精选']"
        @tabClick="tabClick" ref="tabControl1" v-show="isTabFixed"
    ></tab-control>
    <scroll class="content" ref="scroll" :probe-type="3" 
            @scroll="contentScroll" :pull-up-load="true"
            @pullingUp="loadMore">
      <home-swiper :banners="banners" class="home-swiper" @swiperImageLoad="swiperImageLoad"></home-swiper>
      <recommand-view :recommends="recommends"></recommand-view>
      <feature-view></feature-view>
      <tab-control
        class="tab-control"
        :titles="['流行', '新款', '精选']"
        @tabClick="tabClick" ref="tabControl2"
      ></tab-control>
      <goods-list :goods="showGoods"></goods-list>
    </scroll>
    <back-top @click.native="backTop" v-show="isShowBackTop"></back-top>
  </div>
</template>

<script>
import HomeSwiper from "./childrenComps/HomeSwiper.vue";
import RecommandView from "./childrenComps/RecommendView.vue";
import FeatureView from "./childrenComps/FeatureView.vue";

import NavBar from "@/components/common/navbar/NavBar";
import TabControl from "@/components/content/tabControl/TabControl.vue";
import GoodsList from "@/components/content/goods/GoodsList.vue";
import Scroll from "@/components/common/scroll/Scroll.vue";

import { getHomeMultidata, getHomeGoods } from "@/network/home";
import { itemListenerMixin, backTopMixin } from 'common/mixin.js';

export default {
  name: "Home",
  mixins: [itemListenerMixin,backTopMixin],
  components: {
    NavBar,
    HomeSwiper,
    RecommandView,
    FeatureView,
    TabControl,
    GoodsList,
    Scroll
  },
  data() {
    return {
      banners: [],
      recommends: [],
      goods: {
        pop: { page: 0, list: [] },
        new: { page: 0, list: [] },
        sell: { page: 0, list: [] },
      },
      currentType: "pop",
      tabOffsetTop: 0,
      isTabFixed: false,
      saveY: 0,
      itemImgListener: null
    };
  },
  created() {
    // 将处理逻辑抽离到methods中
    // 1.请求混合数据
    this.getHomeMultidata();
    // 2.请求商品数据
    this.getHomeGoods("pop");
    this.getHomeGoods("new");
    this.getHomeGoods("sell");
  },
  mounted(){
    // 放这里是因为没有挂载DOM时，refs会拿不到
    // 1.监听item中图片加载完成
    // const refresh = debounce(this.$refs.scroll.refresh,200)
    // this.itemImgListener = ()=>{ refresh() }
    // this.$bus.$on('itemImageLoad',this.itemImgListener)

    // 这里使用mixins混入相同代码
  },
  computed: {
    // 获取商品传递给子组件GoodList
    showGoods() {
      return this.goods[this.currentType].list;
    },
  },
  activated() {
    this.$refs.scroll.refresh()
    // x,y,time
    this.$refs.scroll.scrollTo(0,this.saveY,0)
  },
  deactivated() {
    // 1.保存y值
    this.saveY = this.$refs.scroll.getScrollY()
    // console.log(this.saveY)

    // 2.取消事件监听处理
    this.$bus.$off('itemImageLoad',this.itemImgListener)
  },
  methods: {
    // ***事件监听相关的方法***
    // 商品切换
    tabClick(index) {
      switch (index) {
        case 0:
          this.currentType = "pop";
          break;
        case 1:
          this.currentType = "new";
          break;
        case 2:
          this.currentType = "sell";
      }
      this.$refs.tabControl1.currentIndex = index;
      this.$refs.tabControl2.currentIndex = index;
    },
    // 回到顶部按钮,这里用了混入

    // 内容滚动监听
    contentScroll(position){
      // console.log(position);
      // 这里的y值是负数
      // 1.判断BackTop是否显示，使用mixin
      // this.isShowBackTop = position.y < -1000
      this.listenShowBackTop(position)

      // 2.决定tabControl是否吸顶
      this.isTabFixed = position.y < -this.tabOffsetTop
    },
    // 上拉加载更多
    loadMore(){
      // console.log('上拉加载更多');
      this.getHomeGoods(this.currentType);
    },
    // 2.获取tabControl的OffsetTop
    // 所有的组件都有一个属性$el，用于获取组件中的元素
    // console.log(this.$refs.tabControl.$el.offsetTop);//46
    // 主要是由于轮播图图片的加载影响TabControl的offsetTop值
    swiperImageLoad(){
      this.tabOffsetTop = this.$refs.tabControl2.$el.offsetTop + 44
      // console.log(this.tabOffsetTop);
    },

    // ***网络请求***
    getHomeMultidata() {
      getHomeMultidata().then((res) => {
        // console.log(res);
        // 应该将res保存到data中，否则
        // 在函数执行完毕后，res会被销毁回收
        this.banners = res.data.data.banner.list;
        this.recommends = res.data.data.recommend.list;
      });
    },
    getHomeGoods(type) {
      const page = this.goods[type].page + 1;
      getHomeGoods(type, page).then((res) => {
        // console.log(res);
        this.goods[type].list.push(...res.data.data.list);
        this.goods[type].page += 1;

        // 结束上拉，相当于重置
        this.$refs.scroll.finishPullUp()
      });
    },
  }
};
</script>
<style scoped>
.home{
  position: relative;
}
.home-nav {
  background-color: var(--color-tint);
  color: white;
  height: 44px;
  /* 将顶部导航栏粘贴定位 */
  /* position: fixed;
  left: 0;
  right: 0;
  top: 0; */
  /* z-index: 99; */
}

.home-swiper{
  margin-top: 44px;
}

.tab-control {
  /* position: sticky;
  top: 44px; */
  /* betterscroll无法适配sticky */
  position: relative;
  z-index: 9;
}

.content{
  position: absolute;
  top: 44px;
  bottom: 49px;
  left: 0;
  right: 0;
  overflow: hidden;
}
/* .content{
  height: calc(100vh - 93px);
  overflow: hidden;
  margin-top: 44px;
} */

</style>